<template>
  <div>
    <header>
      <p><slot name="title">title</slot></p>
      <p><slot name="change"></slot></p>
    </header>
    <main>
      <slot name="list"></slot>
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // list: [],
    };
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
div {
  padding: 10px;
  // border-radius: 20px;
  header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    padding: 20px;
    background: linear-gradient(to right, blue, skyblue);
    color: #fff;
    border-radius: 10px 10px 0 0;
  }
  main {
    ul {
      padding: 30px;
      li {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        .name {
          font-weight: bold;
        }
        .fo {
          width: 100px;
          height: 50px;
          border-radius: 50px;
          background-color: blue;
          color: #fff;
          text-align: center;
          // line-height: 50px;
        }
      }
    }
  }
}
</style>
